<template>
	<view class="height-screen">
		<cu-custom bgColor="bg-white" isBack>
			<block slot="content">{{$t('filed.myOrder')}}</block>
		</cu-custom>
		<view class="bg-white">
			<u-tabs :list="tabList" lineColor="#06C168" :activeStyle="activeStyle" :current="current"
				@change="handleChange"></u-tabs>
		</view>
		<view class="margin-ht grid gap padding-bottom-lg" style="margin-top: 20rpx;">
			<view class="bg-white radius-sm flex padding-lg flex-direction" v-for="(item,index) in dataList"
				:key="index" @tap.stop="helper.routerNav('/pages/mine/orderDetail',{id:item.id})">
				<view class="flex justify-between align-center">
					<text class="font-bold text-black"
						style="font-size: 30rpx;">{{item.createtime | handleDateTime('YYYY-MM-DD HH:mm')}} 订单</text>
					<text class="text-red text-sm">$<text class="text-xl">{{item.actual_money}}</text></text>
				</view>
				<text class="text-gray font-400 text-df padding-tb-xs">{{$t('filed.gongyou')}}<text
						class="text-black">{{item.item.length}}</text>{{$t('order.shopListNum')}}</text>
				<view class="grid gap-sm padding-bottom" :class="item.status==4?'':'u-border-bottom'">
					<view class="flex flex-direction" :class="item.status==4?'padding-bottom-sm u-border-bottom':''"
						v-for="(shopItem,shopIndex) in item.item" :key="shopIndex">
						<view class="flex align-center">
							<image :src="helper.handleImage(shopItem.image)" style="width: 100rpx;height: 100rpx;"
								class="radius-xs flex-shrink" />
							<view class="flex justify-between font-400 margin-left flex-sub align-center"
								style="height: 100%;">
								<view class="flex flex-direction justify-around" style="height: 100%;">
									<text
										class="font-bold text-black text-df one-line">{{currentLang=='en'?shopItem.en_name:shopItem.zh_name}}</text>
									<text
										class="text-sm text-red font-600 margin-top-xs">{{$t('filed.jine')}}：${{shopItem.price}}</text>
								</view>
								<text
									class="text-sm text-black font-bold">{{$t('filed.shuliang')}}：X{{shopItem.num}}</text>
							</view>
						</view>
						<view class="flex justify-end padding-top" v-if="item.status==4">
							<view class="btnSuccess setButton margin-left" @tap.stop="handleComment(shopItem.id)"
								v-if="shopItem.comment_status==1">
								<text class="text-sm font-400"
									style="color: #06C168;">{{$t('filed.lijipingjia')}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="flex justify-end padding-top" v-if="item.status==1">
					<view class="btnGray setButton" @tap.stop="orderCancel(item.id)">
						<text class="text-gray text-sm font-400">{{$t('filed.canclePay')}}</text>
					</view>
					<view class="btnSuccess setButton margin-left" @tap.stop="orderPay(item.id)">
						<text class="text-sm font-400" style="color: #06C168;">{{$t('filed.payShop')}}</text>
					</view>
				</view>
				<view class="flex justify-end padding-top" v-if="item.status==3">
					<view class="btnSuccess setButton margin-left" @tap.stop="orderConfirm(item.id)">
						<text class="text-sm font-400" style="color: #06C168;">{{$t('filed.confirmOrder')}}</text>
					</view>
				</view>
				<view class="flex justify-end padding-top" v-if="item.shouhou_status!=1&&item.status==4">
					<view class="btnSuccess setButton margin-left" @tap.stop="shouhouCancel(item.id)">
						<text class="text-sm font-400" style="color: #06C168;">{{$t('filed.cancleSale')}}</text>
					</view>
				</view>
			</view>
			<section class="empty" v-if="!dataList.length">
				<u-empty mode="list"  :text="$t('list.empty')" />
			</section>
		</view>
		<comment ref="comment" @commentSuccess="commentSuccess" />
		<!-- <u-popup :show="saleShow" @close="saleClose" mode="center" :safeAreaInsetBottom="false" closeOnClickOverlay
			:round="16">
			<view class="padding flex flex-direction" style="width: 90vw;">
				<text class="text-xl text-black font-400 text-center">取消售后提醒</text>
				<text class="text-gray text-df text-center font-400" style="padding: 50rpx 0;">您确定要取消售后吗?</text>
				<view class="flex justify-around">
					<view class="setButton" @tap.stop="saleClose"
						style="width: 200rpx;height: 70rpx;background: #F1F1F1;border-radius: 35rpx;">
						<text class="font-400 text-black text-xl">取消</text>
					</view>
					<view class="setButton"
						style="width: 200rpx;height: 70rpx;background: #06C168;border-radius: 35rpx;">
						<text class="font-400 text-white text-xl">确定</text>
					</view>
				</view>
			</view>
		</u-popup> -->
		<u-popup :show="wechatShow" @close="wechatClose" mode="center" round="8" :safeAreaInsetBottom="false"
			:closeable="true">
			<view class="flex flex-direction padding-lr-lg align-center padding-bottom-lg" style="width: 80vw;">
				<view class="flex justify-center padding-tb-lg">
					<text style="font-size: 33rpx;" class="text-black">支付方式</text>
				</view>
				<view class="gap"
					style="width: -webkit-fill-available;margin-top: 40rpx;display: grid;grid-auto-flow: column;">
					<view style="flex: 1;">
						<u-button type="success" text="PayPal" @click="pay('paypal')"></u-button>
					</view>
					<view style="flex: 1;">
						<u-button type="primary" :text="$t('user.bankCard')" @click="pay('paypal')"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import comment from '@/components/comment.vue'
	import {
		statistics,
		orderLists,
		orderCancel,
		orderPay,
		orderConfirm,
		shouhouCancel,
		createPaypalPaymentUrl
	} from '@/apis'
	export default {
		components: {
			comment
		},
		data() {
			return {
				tabList: [],
				activeStyle: {
					fontWeight: 'bold',
					fontSize: '30rpx',
					color: '#06C168'
				},
				current: 0,
				page: 1,
				dataList: [],
				saleShow: false,
				currentLang: '',
				wechatShow: false,
				orderId: '',
			}
		},
		onLoad(options) {
			this.current = options.current * 1
		},
		onShow() {
			this.wechatShow = false
			this.statistics()
			this.currentLang = uni.getStorageSync('lang')
		},
		methods: {
			wechatClose() {
				this.wechatShow = false
			},
			handleChange(event) {
				this.current = event.index
				this.statistics()
			},
			async statistics() {
				const res = await statistics()
				this.tabList = [{
					id: 0,
					name: this.$t('filed.all')
				}, {
					id: 1,
					name: `${this.$t('mine.daizhifu')}(${res.daizhifu})`
				}, {
					id: 2,
					name: `${this.$t('mine.daishouhuo')}(${res.daishouhuo})`
				}, {
					id: 4,
					name: `${this.$t('mine.success')}(${res.yiwancheng})`
				}, {
					id: 10,
					name: `${this.$t('mine.sale')}(${res.shouhou})`
				}]
				this.page = 1
				this.dataList = []
				this.orderLists()
			},
			async orderLists() {
				const res = await orderLists({
					status_type: this.tabList[this.current].id
				})
				this.dataList = this.dataList.concat(...res.data)
			},
			async orderCancel(order_id) {
				await orderCancel({
					order_id
				})
				this.helper.showToast(this.$t('message.success'))
				await this.helper.delay(1000, () => {
					this.statistics()
				})
			},
			async orderConfirm(order_id) {
				await orderConfirm({
					order_id
				})
				this.helper.showToast(this.$t('message.success'))
				await this.helper.delay(1000, () => {
					this.statistics()
				})
			},
			async shouhouCancel(order_id) {
				await this.helper.showCustomModal(this.$t('filed.isCancle'), async () => {
					await shouhouCancel({
						order_id
					})
					this.helper.showToast(this.$t('message.success'))
					await this.helper.delay(1000, () => {
						this.statistics()
					})
				})
			},
			async orderPay(order_id) {
				this.orderId = order_id
				this.wechatShow = true
			},
			async pay(type) {
				const payUrl = await createPaypalPaymentUrl({
					order_id: this.orderId
				})
				this.wechatClose()
				plus.runtime.openURL(payUrl)
			},
			handleComment(item_id) {
				this.$refs.comment.commentOpen({
					item_id
				})
			},
			saleClose() {
				this.saleShow = false
			},
			commentSuccess() {
				this.statistics()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btnGray {
		width: 166rpx;
		height: 67rpx;
		background: rgba(136, 136, 136, 0.1);
		border-radius: 34rpx;
	}

	.btnSuccess {
		width: 166rpx;
		height: 67rpx;
		background: rgba(6, 193, 104, 0.1);
		border-radius: 34rpx;
	}
</style>